<template>
  <div id="pay">
    <Headers :title="$t('asset.assetsDetail.pay')" :moreUrl="require('../../assets/scan.png')" @click="openSacn" />
    <div class="pay-label">
      <div class="maney-types">
        <img src="../../assets/ETH_icon.png" alt>
        <span>ETH</span>
      </div>
      <div class="wallet-adderss">
        <span>{{$t("receipt.walletAdderss")}}</span>
        <span class="walletNum">{{walletNum}}</span>
      </div>
      <div class="address">{{address}}</div>
    </div>
    <div class="sk_user">
        <div class="left_sk">
            <span>{{$t("receipt.receipt_user")}}</span>
            <span class="select-user">{{selectUser}}</span>
        </div>
        <div class="right_sk">
            <img src="../../assets/user.png" alt="">
        </div>
    </div>
    <button class="nextSubmit" @click="nextSubmit">{{$t("receipt.nextBtn")}}</button>
  </div>
</template>

<script>
import { qrcode } from "utils/js/qrcode";
import { constants } from 'crypto';
export default {
  name: "pay",
  data() {
    return {
      walletNum: 15054152005,
      address: "0xf69a56e59b8c9240705d7c388ab8d982b4a215ee",
      selectUser:''
    };
  },
  methods:{
      nextSubmit() {
          alert('next');
      },
      openSacn() {
          alert('打开相机');
      }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#pay
  width 100%
  positCenter(0,0,0,0,0,0)
  box-sizing border-box
  padding 0 rem(20)
  bgImg('../../assets/receiptBg.png', cover)
  .pay-label
    box-sizing border-box
    padding rem(30)
    margin-top rem(110)
    width 100%
    height rem(162)
    text-align left
    bgImg('../../assets/pay_bg.png', contain)
    .maney-types
      margin-bottom rem(14)
      img
        width rem(30)
        height rem(34)
        object-fit contain
        vertical-align middle
      span
        font-size rem(20)
        line-height rem(27)
        color $fontColor
        vertical-align middle
        margin-left rem(13)
        font-weight bold
    .wallet-adderss
      margin-bottom rem(7)
      span
        font-size rem(15)
        color $addressColor
        vertical-align middle
      .walletNum
        font-size rem(25)
        line-height rem(34)
        color $fontColor
    .address
      font-size rem(12)
      line-height rem(16)
      color $fontColor
      font-weight bold
  .sk_user
      width 100%
      height rem(49)
      background-color $inputBg
      margin-top rem(19)
      border-radius rem(25)
      display flex
      justify-content space-between
      align-items center
      box-sizing border-box
      padding 0 rem(20)
      font-size rem(15)
      color $colors
      .right_sk
          width rem(25)
          height rem(25)
          img
            width 100%
            height 100%
  .nextSubmit
      width 80%
      height rem(49)
      positCenter(50%,auto,rem(100),0,-50%,0)
      border-radius rem(25)
      background-color $tabBarActive
      color $fontColor
      font-size rem(14)
</style>
